﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using jiuyuan.数据.共享类

<div class="admin-container">
    <div class="admin-header">
        <h3>技能管理</h3>
        <button class="btn-primary" @onclick="添加新技能">添加新技能</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="item-list">
                @foreach (var 技能 in 显示技能列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@技能.名称</h4>
                            <p>等级要求: @技能.等级要求</p>
                            <p>消耗魔法值: @技能.消耗魔法值</p>
                            <p>元素类型: @GetElementType((int)技能.元素类型)</p>
                            <p>效果数量: @技能.效果列表.Count</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看技能详情(技能)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑技能(技能)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除技能(技能.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 技能详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>技能详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的技能 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>技能名称:</label>
                        <span>@选中的技能.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的技能.等级要求</span>
                    </div>
                    <div class="detail-item">
                        <label>消耗魔法值:</label>
                        <span>@选中的技能.消耗魔法值</span>
                    </div>
                    <div class="detail-item">
                        <label>冷却时间:</label>
                        <span>@选中的技能.冷却时间 秒</span>
                    </div>
                    <div class="detail-item">
                        <label>元素类型:</label>
                        <span>@GetElementType((int)选中的技能.元素类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>目标类型:</label>
                        <span>@GetTargetType((int)选中的技能.目标类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>图标:</label>
                        <span>@选中的技能.图标</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的技能.描述</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>技能效果:</label>
                        <div class="effects-preview">
                            @if (选中的技能.效果列表.Any())
                            {
                                @foreach (var effect in 选中的技能.效果列表)
                                {
                                    <div class="effect-preview">
                                        <span class="effect-type">@effect.效果名称</span>
                                        <span class="effect-desc">@effect.获取描述()</span>
                                    </div>
                                }
                            }
                            else
                            {
                                <span class="no-effects">无效果</span>
                            }
                        </div>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的技能.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的技能.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑技能弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑技能" : "添加新技能")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前技能 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="skillName">技能名称:</label>
                        <input type="text" id="skillName" @bind="当前技能.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillLevel">等级要求:</label>
                        <input type="number" id="skillLevel" @bind="当前技能.等级要求" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillManaCost">消耗魔法值:</label>
                        <input type="number" id="skillManaCost" @bind="当前技能.消耗魔法值" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillCooldown">冷却时间(秒):</label>
                        <input type="number" id="skillCooldown" @bind="当前技能.冷却时间" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillElementType">元素类型:</label>
                        <select id="skillElementType" @bind="当前技能.元素类型" class="form-control">
                            <option value="0">无</option>
                            <option value="1">火</option>
                            <option value="2">水</option>
                            <option value="3">风</option>
                            <option value="4">土</option>
                            <option value="5">物理</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillTargetType">目标类型:</label>
                        <select id="skillTargetType" @bind="当前技能.目标类型" class="form-control">
                            <option value="0">自身</option>
                            <option value="1">友方单体</option>
                            <option value="2">友方群体</option>
                            <option value="3">敌方单体</option>
                            <option value="4">敌方群体</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillIcon">图标:</label>
                        <input type="text" id="skillIcon" @bind="当前技能.图标" class="form-control" />
                    </div>
                    <div class="form-group full-width">
                        <label for="skillDescription">描述:</label>
                        <textarea id="skillDescription" @bind="当前技能.描述" class="form-control" rows="3"></textarea>
                    </div>
                    
                    <!-- 效果配置区域 -->
                    <div class="form-group full-width">
                        <label>技能效果:</label>
                        <div class="effects-container">
                            <div class="effects-header">
                                <span>效果列表</span>
                                <button type="button" class="btn-secondary small" @onclick="添加效果">添加效果</button>
                            </div>
                            
                            @if (当前技能.效果列表.Any())
                            {
                                @foreach (var effect in 当前技能.效果列表)
                                {
                                    <div class="effect-item">
                                        <div class="effect-header">
                                            <select value="@effect.效果类型名称" class="form-control" @onchange="(args) => 效果类型改变(effect, args.Value.ToString())">
                                                <option value="伤害效果">伤害效果</option>
                                                <option value="治疗效果">治疗效果</option>
                                                <option value="增益效果">增益效果</option>
                                                <option value="持续伤害效果">持续伤害效果</option>
                                            </select>
                                            <button type="button" class="btn-danger small" @onclick="() => 移除效果(effect)">移除</button>
                                        </div>
                                        
                                        <div class="effect-params">
                                            @if (effect is 伤害效果 伤害效果)
                                            {
                                                <div class="param-group">
                                                    <label>伤害值:</label>
                                                    <input type="number" value="@((int)(伤害效果.参数.TryGetValue("基础伤害", out var 伤害值) ? 伤害值 : 0))" class="form-control small" @onchange="@(args => 伤害效果.参数["基础伤害"] = int.Parse(args.Value.ToString()))" />
                                                </div>
                                                <div class="param-group">
                                                    <label>伤害元素:</label>
                                                    <select value="@((int)(伤害效果.参数.TryGetValue("元素类型", out var 元素类型) ? 元素类型 : 元素属性类型.无))" class="form-control small" @onchange="@(args => 伤害效果.参数["元素类型"] = (元素属性类型)Enum.Parse(typeof(元素属性类型), args.Value.ToString()))">
                                                        <option value="0">无</option>
                                                        <option value="1">火</option>
                                                        <option value="2">水</option>
                                                        <option value="3">风</option>
                                                        <option value="4">土</option>
                                                        <option value="5">物理</option>
                                                    </select>
                                                </div>
                                                <div class="param-group">
                                                    <label>暴击率:</label>
                                                    <input type="number" value="@((float)(伤害效果.参数.TryGetValue("暴击率", out var 暴击率) ? 暴击率 : 0f))" class="form-control small" step="0.01" min="0" max="1" @onchange="@(args => 伤害效果.参数["暴击率"] = float.Parse(args.Value.ToString()))" />
                                                </div>
                                            }
                                            else if (effect is 治疗效果 治疗效果)
                                            {
                                                <div class="param-group">
                                                    <label>治疗量:</label>
                                                    <input type="number" value="@((int)(治疗效果.参数.TryGetValue("基础治疗", out var 治疗量) ? 治疗量 : 0))" class="form-control small" @onchange="@(args => 治疗效果.参数["基础治疗"] = int.Parse(args.Value.ToString()))" />
                                                </div>
                                                <div class="param-group">
                                                    <label>是否群体治疗:</label>
                                                    <input type="checkbox" checked="@((bool)(治疗效果.参数.TryGetValue("是否群体治疗", out var 是否群体) ? 是否群体 : false))" class="form-check" @onchange="@(args => 治疗效果.参数["是否群体治疗"] = bool.Parse(args.Value.ToString()))" />
                                                </div>
                                            }
                                            else if (effect is 增益效果 增益效果)
                                            {
                                                <div class="param-group">
                                                    <label>持续时间(回合):</label>
                                                    <input type="number" value="@((int)(增益效果.参数.TryGetValue("持续回合", out var 持续时间) ? 持续时间 : 0))" class="form-control small" @onchange="@(args => 增益效果.参数["持续回合"] = int.Parse(args.Value.ToString()))" />
                                                </div>
                                                <div class="param-group">
                                                    <label>增益属性:</label>
                                                    <div class="attribute-grid">
                                                        <div class="attribute-item">
                                                            <label>生命值:</label>
                                                            <input type="number" value="@((int)(增益效果.参数.TryGetValue("生命值", out var 生命值) ? 生命值 : 0))" class="form-control tiny" @onchange="@(args => 增益效果.参数["生命值"] = int.Parse(args.Value.ToString()))" />
                                                        </div>
                                                        <div class="attribute-item">
                                                            <label>魔法值:</label>
                                                            <input type="number" value="@((int)(增益效果.参数.TryGetValue("魔法值", out var 魔法值) ? 魔法值 : 0))" class="form-control tiny" @onchange="@(args => 增益效果.参数["魔法值"] = int.Parse(args.Value.ToString()))" />
                                                        </div>
                                                        <div class="attribute-item">
                                                            <label>物理攻击:</label>
                                                            <input type="number" value="@((int)(增益效果.参数.TryGetValue("物理攻击", out var 物理攻击) ? 物理攻击 : 0))" class="form-control tiny" @onchange="@(args => 增益效果.参数["物理攻击"] = int.Parse(args.Value.ToString()))" />
                                                        </div>
                                                        <div class="attribute-item">
                                                            <label>物理防御:</label>
                                                            <input type="number" value="@((int)(增益效果.参数.TryGetValue("物理防御", out var 物理防御) ? 物理防御 : 0))" class="form-control tiny" @onchange="@(args => 增益效果.参数["物理防御"] = int.Parse(args.Value.ToString()))" />
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                            else if (effect is 持续伤害效果 持续伤害效果)
                                            {
                                                <div class="param-group">
                                                    <label>每回合伤害:</label>
                                                    <input type="number" value="@((int)(持续伤害效果.参数.TryGetValue("每回合伤害", out var 每回合伤害) ? 每回合伤害 : 0))" class="form-control small" @onchange="@(args => 持续伤害效果.参数["每回合伤害"] = int.Parse(args.Value.ToString()))" />
                                                </div>
                                                <div class="param-group">
                                                    <label>持续时间(回合):</label>
                                                    <input type="number" value="@((int)(持续伤害效果.参数.TryGetValue("持续回合", out var 持续时间) ? 持续时间 : 0))" class="form-control small" @onchange="@(args => 持续伤害效果.参数["持续回合"] = int.Parse(args.Value.ToString()))" />
                                                </div>
                                                <div class="param-group">
                                                    <label>伤害元素:</label>
                                                    <select value="@((int)(持续伤害效果.参数.TryGetValue("元素类型", out var 元素类型) ? 元素类型 : 元素属性类型.无))" class="form-control small" @onchange="@(args => 持续伤害效果.参数["元素类型"] = (元素属性类型)Enum.Parse(typeof(元素属性类型), args.Value.ToString()))">
                                                        <option value="0">无</option>
                                                        <option value="1">火</option>
                                                        <option value="2">水</option>
                                                        <option value="3">风</option>
                                                        <option value="4">土</option>
                                                        <option value="5">物理</option>
                                                    </select>
                                                </div>
                                            }
                                        </div>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="no-effects">暂无效果，点击"添加效果"按钮添加</div>
                            }
                        </div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存技能">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<style>
    /* 原有的样式保持不变，添加以下新样式 */

    .modal-content.large {
        max-width: 900px;
    }

    /* 效果容器样式 */
    .effects-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .effects-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .effects-header span {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-item {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
        background-color: rgba(40, 40, 80, 0.8);
    }

    .effect-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .effect-header select {
        flex: 1;
        margin-right: 10px;
    }

    .effect-params {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.5);
        border-radius: 5px;
    }

    .param-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .param-group label {
        color: #a0a0e0;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    .form-control.small {
        padding: 5px 8px;
        font-size: 0.9rem;
    }

    .form-control.tiny {
        padding: 3px 5px;
        font-size: 0.8rem;
    }

    .form-check {
        width: auto;
        margin-top: 5px;
    }

    .attribute-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .attribute-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .attribute-item label {
        font-size: 0.8rem;
    }

    .btn-danger {
        background-color: rgba(160, 60, 60, 0.8);
        color: #ffa0a0;
        border: none;
        border-radius: 3px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 0.8rem;
    }

    .btn-danger:hover {
        background-color: rgba(180, 80, 80, 0.9);
    }

    .effects-preview {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .effect-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    .effect-type {
        color: #b19cd9;
        font-weight: 500;
    }

    .effect-desc {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .no-effects {
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 20px;
    }
</style>

@code {
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public 效果管理器 效果管理器 { get; set; } = default!;
    [Inject] public ILogger<技能管理> Logger { get; set; } = default!;

    private List<技能配置> 技能列表 = [];
    private List<技能配置> 显示技能列表 = [];
    private bool 数据已加载 = false;

    private 技能配置 当前技能 = new 技能配置();
    private 技能配置 选中的技能 = new 技能配置();
    private bool IsEditing = false;
    private Guid 编辑中的技能Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;

    protected override async Task OnInitializedAsync()
    {
        await 加载技能数据();
    }

    private async Task 加载技能数据()
    {
        try
        {
            技能列表 = await 配置加载器.获取所有技能();
            显示技能列表 = 技能列表;
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载技能数据时发生错误");
        }
    }

    private void 查看技能详情(技能配置 技能)
    {
        选中的技能 = 技能;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新技能()
    {
        当前技能 = new 技能配置
        {
            Id = Guid.NewGuid(),
            创建时间 = DateTime.Now,
            更新时间 = DateTime.Now,
            效果列表 = new List<技能效果>(),
            效果ID列表 = new List<Guid>()
        };
        IsEditing = false;
        编辑中的技能Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑技能(技能配置 技能)
    {
        // 深拷贝技能对象，避免直接修改原始数据
        当前技能 = new 技能配置
        {
            Id = 技能.Id,
            名称 = 技能.名称,
            描述 = 技能.描述,
            等级要求 = 技能.等级要求,
            图标 = 技能.图标,
            创建时间 = 技能.创建时间,
            更新时间 = DateTime.Now,
            消耗魔法值 = 技能.消耗魔法值,
            冷却时间 = 技能.冷却时间,
            元素类型 = 技能.元素类型,
            目标类型 = 技能.目标类型,
            效果类型 = 技能.效果类型,
            效果ID列表 = new List<Guid>(技能.效果ID列表),
            效果列表 = 技能.效果列表.Select(e => e.深拷贝()).ToList()
        };
        IsEditing = true;
        编辑中的技能Id = 技能.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除技能(Guid 技能Id)
    {
        var 技能 = 显示技能列表.FirstOrDefault(s => s.Id == 技能Id);
        if (技能 != null)
        {
            显示技能列表.Remove(技能);
            技能列表.Remove(技能);
            await 加载技能数据();
        }
    }

    // 效果管理方法
    private void 添加效果()
    {
        var 新效果 = new 伤害效果() // 默认使用伤害效果
        {
            Id = Guid.NewGuid(),
            效果名称 = "新伤害效果",
            参数 = new Dictionary<string, object>
            {
                ["基础伤害"] = 10,
                ["元素类型"] = 元素属性类型.物理,
                ["暴击率"] = 0.1f
            }
        };
        
        当前技能.效果列表.Add(新效果);
        当前技能.效果ID列表.Add(新效果.Id);
        StateHasChanged();
    }

    private void 移除效果(技能效果 效果)
    {
        当前技能.效果列表.Remove(效果);
        当前技能.效果ID列表.Remove(效果.Id);
        StateHasChanged();
    }

    private void 效果类型改变(技能效果 效果, string 新类型名称)
    {
        var index = 当前技能.效果列表.ToList().IndexOf(效果);
        if (index >= 0)
        {
            技能效果 新效果;
            
            switch (新类型名称)
            {
                case "伤害效果":
                    新效果 = new 伤害效果 
                    { 
                        Id = 效果.Id, 
                        效果名称 = "伤害效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
                case "治疗效果":
                    新效果 = new 治疗效果 
                    { 
                        Id = 效果.Id, 
                        效果名称 = "治疗效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
                case "增益效果":
                    新效果 = new 增益效果 
                    { 
                        Id = 效果.Id, 
                        效果名称 = "增益效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
                case "持续伤害效果":
                    新效果 = new 持续伤害效果 
                    { 
                        Id = 效果.Id, 
                        效果名称 = "持续伤害效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
                default:
                    新效果 = new 伤害效果 
                    { 
                        Id = 效果.Id, 
                        效果名称 = "伤害效果",
                        参数 = new Dictionary<string, object>()
                    };
                    break;
            }
            
            var list = 当前技能.效果列表.ToList();
            list[index] = 新效果;
            当前技能.效果列表 = list;
            StateHasChanged();
        }
    }

    private async Task 保存技能()
    {
        if (string.IsNullOrWhiteSpace(当前技能.名称))
            return;

        try
        {
            // 更新时间
            当前技能.更新时间 = DateTime.Now;
            
            // 如果没有创建时间，设置为当前时间
            if (当前技能.创建时间 == DateTime.MinValue)
            {
                当前技能.创建时间 = DateTime.Now;
            }

            // 确保效果ID列表与效果列表同步
            当前技能.效果ID列表 = 当前技能.效果列表.Select(e => e.Id).ToList();

            // 保存到数据库
            await 配置加载器.保存技能配置(当前技能);
            
            // 更新显示列表
            if (!IsEditing)
            {
                显示技能列表.Add(当前技能);
                技能列表.Add(当前技能);
            }
            else
            {
                var existingSkill = 显示技能列表.FirstOrDefault(s => s.Id == 编辑中的技能Id);
                if (existingSkill != null)
                {
                    var index = 显示技能列表.IndexOf(existingSkill);
                    显示技能列表[index] = 当前技能;
                    
                    var originalIndex = 技能列表.IndexOf(existingSkill);
                    技能列表[originalIndex] = 当前技能;
                }
            }

            显示编辑弹窗 = false;
            await 加载技能数据();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存技能时发生错误");
        }
    }

    private string GetElementType(int 元素类型) => 元素类型 switch
    {
        0 => "无",
        1 => "火", 
        2 => "水",
        3 => "风",
        4 => "土",
        5 => "物理",
        _ => "未知"
    };

    private string GetTargetType(int 目标类型) => 目标类型 switch
    {
        0 => "自身",
        1 => "友方单体", 
        2 => "友方群体",
        3 => "敌方单体",
        4 => "敌方群体",
        _ => "未知"
    };
}